<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.js"></script>
</head>
<body>
<!--复选框-->
<div id="app1">
  <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names{{checkedNames}}</span>
</div>
<!--选择列表-->
<div id="app2">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected:{{selected}}</span>
</div>
<!--用 v-for 渲染：选择列表-->
<div id="app3">
  <select v-model="selected">
    <option :value="option.value" v-for="option in options">
      {{option.text}}
    </option>
  </select>
  <span>Selected:{{selected}}</span>
</div>
</body>
</html>
<script>
  var app = new Vue({
    el: "#app1",
    data: {
      checkedNames: []
    }
  })
  var app = new Vue({
    el: '#app2',
    data: {
      selected: ''
    }
  })
  var app = new Vue({
    el: "#app3",
    data: {
      selected: 'A',
      options: [
        {text: 'One', value: 'A'},
        {text: 'Two', value: 'B'},
        {text: 'Three', value: 'C'}
      ]
    }
  })
</script>